<template>
  <div class="home">
    <!-- <h1 id="box">{{ msg }}</h1> -->
    <h1 ref="box">{{ msg }}</h1>
    <button @click="change">改变msg</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: "hello world",
    };
  },
  created() {
    // let box = document.getElementById("box");

    this.$nextTick(() => {
      let box = this.$refs.box;
      console.log(box);
    });
  },
  mounted() {
    let box = this.$refs.box;
    console.log(box);
  },
  methods: {
    change() {
      this.msg = "今天四十来度";

      // this.$nextTick(() => {
      //   console.log(this.$refs.box.innerHTML);
      // });
      setTimeout(() => {
        console.log(this.$refs.box.innerHTML);
      }, 0);
    },
  },
  beforeRouteEnter(to, from, next) {
    console.log("这是组件级守卫路由进入之前");
    next((vm) => {
      // vm就是组件实例 就是this
      if (vm.$store.state.token) {
        next();
      } else {
        next("/login");
      }
    });
  },
};
</script>
